<template>
    <el-dialog title="编辑用户信息" class="editOperate" :visible.sync="isDial" width="800px" :before-close='closeDialog'>
        <el-form :model="form" size='mini' :rules='rules' ref="editOperate">
            <div class="row">
                <div class="column">
                    <el-form-item label="业主姓名" prop='customer' :label-width="formLabelWidth">
                        <el-input v-model="form.customer" :maxlength="10" class="leftBorder" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <div class="column">
                    <el-form-item label="手机号" prop='phone' :label-width="formLabelWidth">
                        <el-input v-model="form.phone" :maxlength="11" class="leftBorder" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="信息备注" :label-width="formLabelWidth" style="clear:both;">
                    <el-input v-model="form.remark" autocomplete="off" placeholder="最多200字" clearable :maxlength="200"></el-input>
                </el-form-item>
            </div>
            <div class="row">
                <el-form-item label="标签" :label-width="formLabelWidth" style="clear:both;">
                    <el-input v-model="form.label" autocomplete="off" placeholder="最多200字，多个词以中文顿号隔开" clearable :maxlength="200"></el-input>
                    <span style="margin-right:10px;cursor: pointer;" v-for="item in labels" @click="setLabel">{{item}}</span>
                </el-form-item>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveOperate" size='mini'>确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            isDial: false,
            form: {
                createTime: "",
                customer: "",
                housesNumberIds: "",
                id: 0,
                label: "",
                phone: "",
                remark: ""
            },
            labels:['60后','70后','80后','90后','有子女','首套','二套'],
            rules: {
                customer: [
                    {
                        pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                        required: true,
                        message: "业主姓名是必填项",
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/g,
                        required: true,
                        message: "业主手机号是必填项",
                        trigger: "blur"
                    }
                ],
            },
            formLabelWidth: '80px',
            dynamicTags: [],
            inputVisible: false,
            inputValue: ''
        }
    },
    created(){
        this.$root.$on("editUser", data => {
            console.log(data)
            this.form=data
            this.isDial=true
        })
    },
    methods:{
        setLabel(e){ //设置备注
            let form= this.form
            if(form.label){
                form.label+='、'+e.target.innerText
            }else{
                console.log(form.label)
                if(form.label==null){
                    form.label=''
                }
                form.label+=e.target.innerText
            }
        },
        resetForm() {
            this.$refs['editOperate'].resetFields();
        },
        saveOperate(){
            let that=this
            this.$refs.editOperate.validate(valid => {
                if(!valid){
                    return
                }
                let url='user'
                let form=that.form
                let params={
                    createTime:''+form.createTime,
                    customer:form.customer,
                    housesNumberIds:''+form.housesNumberIds,
                    id:form.id,
                    label:''+form.label,
                    phone:form.phone,
                    remark:''+form.remark
                }
                console.log(params)
                request.ajaxPost({
                    url,
                    that,
                    type:'PUT',
                    params,
                    fn(res) {
                        that.isDial = false;
                        // that.resetForm("ruleForm");
                        // that.$root.$emit("refresh",{page:1})
                    }
                });
            })
        },
        closeDialog(){
            this.resetForm()
            this.isDial=false
        }
    }
}
</script>
<style lang="less" scoped>
.editOperate{
    text-align: left;
    .row {
        width: 100%;
        // border-bottom: 1px solid #eeeeee;
        overflow: hidden;
        box-sizing: border-box;
        padding-right:10px; 
        // padding-top: 10px;
        .column {
            float: left;
            width: 50%;
            box-sizing: border-box;
        }
        .column:nth-child(2n) {
            float: right;
        }
        .row:nth-child(2) {
            padding-top: 10px;
            border-bottom: 0px;
        }
        .el-form-item__label {
            font-size: 12px;
            color: #bfcbd9;
        }
        .el-tag + .el-tag {
            margin-left: 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
  }
}
</style>

